
borrow-picker {

  .picker {
    display: none;
    position: fixed;
    top: 0;
    z-index: 150;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    font-size: 14px;
    @include unselectable();

    /******背景******/
    .picker-mask {
      position: absolute;
      z-index: 500;
      width: 100%;
      height: 100%;
      @include office-transition(all,.5s,ease);
      background: $office-opacity-black;
      opacity: 0;
      &.active {
        background: $office-opacity-black;
        opacity: 1;
      }
    }

    /******主体******/
    .picker-panel {
      position: absolute;
      z-index: 600;
      bottom: 0;
      width: 100%;
      height: px2rem(946);
      @include office-translateY(px2rem(946));
      @include office-transition(all,.47s,ease);

      &.active {
        @include office-translateY(px2rem(0));
      }
      /******头部文字******/
      .picker-header{

        //背景
        .header-bg{
          height: px2rem(81);
          margin-bottom: px2rem(-1);
          width: 100%;
          background: url("../assets/img/componets/borrow-picker/head-bg.png") no-repeat center;
          background-size: cover;
        }
        //文字
        .header-title{
          height: px2rem(52);
          margin-top: px2rem(-1);
          background-color: $office-white;
          padding-top: px2rem(15);

          span {
            display: inline-block;
            text-align: center;
            width: px2rem(262);
            height: 100%;
            color: $font-color;
            font-size: px2rem(30);
          }
        }
      }

      /******内容******/
      .picker-section {
        margin-top: px2rem(-2);
        background-color: $office-white;
        /******滑动选择******/
        .picker-scroll {
          position: relative;
          padding-top: px2rem(20);
          // 遮罩
          .mask-top,.mask-middle, .mask-bottom {
            position: absolute;
            z-index: 10;
            width: 100%;
            height: px2rem(136);
            pointer-events: none;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
          }
          .mask-top {
            top: px2rem(20);
            @include gradient-from-bottom(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
          }
          .mask-middle {
            top: px2rem(156);
            height: px2rem(72);
            background: url("../assets/img/componets/borrow-picker/mask-bg.png") no-repeat center;
            background-size: contain;
          }
          .mask-bottom {
            bottom: 0;
            @include gradient-from-top(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
          }
          .wheel-wrapper {
            @include flex-box();
            padding: 0 px2rem(100);
            .wheel {
              @include flex();
              height: px2rem(346);
              overflow: hidden;
              font-size: px2rem(42);
              .wheel-scroll {
                margin-top: px2rem(136);
                line-height: px2rem(72);
              }
              .wheel-item {
                overflow: hidden;
                white-space: nowrap;
                color: $picker-default;
                font-weight: 700;
              }
            }
          }
        }
        /******分割******/
        .picker-divider {
          position: relative;
          margin-top: px2rem(26);
          width: 100%;
          height: px2rem(60);
          border-top: 1px dashed $border-color;
          .info {
            position: absolute;
            width: px2rem(209);
            height: px2rem(28);
            top: px2rem(-22);
            font-size: px2rem(24);
            left: px2percent(273);
            background-color: $office-white;
          }
        }
        /******费用******/
        .picker-cost {
          padding: px2rem(32) 0;
          >ul{
            margin: 0 auto;
            width: px2rem(570);
            li {
              float: left;
              color: #999999;
              font-size: px2percent(24);
              width: px2rem(190);

              >div {
                margin-left: px2rem(64);
                width: px2rem(53);
                height: px2rem(83);
              }
              >p{
                width: 100%;
                text-align: center;
              }

              &:nth-child(1){
                >div {
                  background: url("../assets/img/componets/borrow-picker/audit.png") no-repeat center;
                  background-size: contain;
                }
              }
              &:nth-child(2){
                >div {
                  background: url("../assets/img/componets/borrow-picker/loan.png") no-repeat center;
                  background-size: contain;
                }
              }
              &:nth-child(3){
                >div {
                  background: url("../assets/img/componets/borrow-picker/accpet.png") no-repeat center;
                  background-size: contain;
                }
              }

            }
            @include clear-after();
          }
        }
        /******确定拿钱******/
        .picker-confirm {
          width: px2rem(604);
          height: px2rem(92);
          text-align: center;
          margin: 0 auto;
          line-height: px2rem(92);
          border-radius: px2rem(44);
          font-size: px2rem(38);
          color: $office-white;
          @include office-background();
        }
      }
      /******尾部******/
      .picker-footer {
        margin-top: px2rem(-2);
        background-color: $office-white;
        width: 100%;
        height: 100%;
      }

    }

  }

}
